<script lang="ts" setup>
import { Timer, CollectionTag, Setting, House, Key, User, Menu, Stamp } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import userStore from '../store/UserStore';

let router = useRouter();
let store = userStore();
let root = store.getRoot;
let backToLogin = function () {
    sessionStorage.clear();
    store.saveAccount("");
    router.push('/start/login')
};
let jump1 = function () { router.push('/home/homepage') };
let jump2 = function () { router.push('/home/personInfo') };
let jump3 = function () { router.push('/home/updatePassword') };
let jump4_1 = function () { router.push('/home/punchCard') };
let jump4_2 = function () { router.push('/home/approveAttend') };
let jump4_3 = function () { router.push('/home/app4vocation') };
let jump4_4 = function () { router.push('/home/vocationlist') };
let jump4_5 = function () { router.push('/home/approveVocation') };
let jump4_6 = function () { router.push('/home/attendList') };
let jump4_7 = function () { router.push('/home/calendar') };
let jump4_8 = function () { router.push('/home/approverlist') };
let jump4_9 = function () { router.push('/home/empworktype') };
let jump4_10 = function () { router.push('/home/worktype') };
let jump4_11 = function () { router.push('/home/vocationtype') };
let jump6 = function () { router.push('/home/deptlist') };
let jump7 = function () { router.push('/home/test') };

</script>

<template>
    <el-container class="layout-container-demo" style="height: 500px">
        <el-header
            style="text-align: right; font-size: 12px; background: linear-gradient(to bottom, #3F3F3F, #232323);">
            <span style="text-align: left;float: left;font-size: 16px;line-height: 60px;color: #F3F3F3;">
                <h1>企业人事管理平台</h1>
            </span>
            <div class="toolbar">
                <el-dropdown>
                    <el-button>{{ store.getAccount }}&nbsp;&nbsp;
                        <el-icon style="margin-top: 1px">
                            <setting />
                        </el-icon>
                    </el-button>

                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="backToLogin">注销</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </el-header>
        <el-container>
            <el-aside width="200px" style="min-height: calc(100vh - 60px);">
                <el-scrollbar style="background-color: #444444;">
                    <el-menu :default-openeds="['1', '3']" style="background-color: #444444;">
                        <el-menu-item index="1" @click="jump1">
                            <template #title>
                                <el-icon>
                                    <House />
                                </el-icon>首页
                            </template>
                        </el-menu-item>
                        <el-menu-item index="2" @click="jump2">
                            <template #title>
                                <el-icon>
                                    <CollectionTag />
                                </el-icon>查看个人信息
                            </template>
                        </el-menu-item>
                        <el-menu-item index="3" @click="jump3">
                            <template #title>
                                <el-icon>
                                    <Key />
                                </el-icon>修改登录密码
                            </template>
                        </el-menu-item>
                        <el-sub-menu index="4">
                            <template #title>
                                <el-icon>
                                    <Timer />
                                </el-icon>时间管理
                            </template>
                            <div style="background-color: #515151; opacity: 80%;">
                                <el-menu-item index="4-1" @click="jump4_1">考勤打卡</el-menu-item>
                                <el-menu-item v-if="root == 2 || root == 0" index="4-2"
                                    @click="jump4_2">审批考勤补签</el-menu-item>
                                <el-menu-item index="4-3" @click="jump4_3">申请休假</el-menu-item>
                                <el-menu-item index="4-4" @click="jump4_4">休假记录</el-menu-item>
                                <el-menu-item v-if="root == 3 || root == 0" index="4-5" @click="jump4_5">审批休假</el-menu-item>
                                <el-menu-item index="4-6" @click="jump4_6">月度出勤记录</el-menu-item>
                                <el-menu-item v-if="root == 0" index="4-7" @click="jump4_7">日历设定</el-menu-item>
                                <el-menu-item v-if="root == 0" index="4-8" @click="jump4_8">审批人设定</el-menu-item>
                                <el-menu-item v-if="root == 0" index="4-9" @click="jump4_9">人员排班设定</el-menu-item>
                                <el-menu-item v-if="root == 0" index="4-10" @click="jump4_10">排班类型设定</el-menu-item>
                                <el-menu-item v-if="root == 0" index="4-11" @click="jump4_11">假期类型设定</el-menu-item>
                            </div>
                        </el-sub-menu>
                        <el-menu-item index="5" @click="jump1">
                            <template #title>
                                <el-icon>
                                    <User />
                                </el-icon>员工信息管理
                            </template>
                        </el-menu-item>
                        <el-menu-item index="6" @click="jump6">
                            <template #title>
                                <el-icon>
                                    <Menu />
                                </el-icon>部门信息管理
                            </template>
                        </el-menu-item>
                        <el-menu-item index="7" @click="jump7">
                            <template #title>
                                <el-icon>
                                    <Stamp />
                                </el-icon>职位信息管理
                            </template>
                        </el-menu-item>
                    </el-menu>
                </el-scrollbar>
            </el-aside>
            <el-container>
                <el-main>
                    <RouterView></RouterView>

                </el-main>
                <el-footer style="background-color: #444444;">
                    <div
                        style="text-align: center;line-height: 60px; color: rgb(115.2, 117.6, 122.4);background-color: #444444;">
                        <span>2024 ©neusoft.com</span>
                    </div>
                </el-footer>
            </el-container>
        </el-container>
    </el-container>
</template>



<style scoped>
.layout-container-demo .el-header {
    position: relative;
    background-color: var(--el-color-primary-light-7);
    color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
    color: var(--el-text-color-primary);
    background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
    border-right: none;
}

.layout-container-demo .el-main {
    padding: 0;
    background-color: #3B3B3B;
    color: #000;
    height: 100%;
}

.layout-container-demo .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
}

.el-sub-menu .el-menu-item {
    height: 40px;
}
</style>